<template>
    <div>
        <el-card shadow="hover" :body-style="{padding: '0px'}">
            <div class="card-box clearfix">
                <i class="box-title-icon fontColor" :class="scheduler.icon"></i>

                    <el-tabs v-model="activeName">
                        <el-tab-pane :label="scheduler.name" name="first">
                            <div class="tabs-content-box">
                                <vue-calendar
                                        :events="calendar.events"
                                        :lunar="calendar.lunar"
                                        :value="calendar.value"
                                        :begin="calendar.begin"
                                        :end="calendar.end"
                                        :date="calendar.date"
                                        :weeks="calendar.weeks"
                                        :months="calendar.months"
                                        @select="calendar.select"
                                        @selectMonth="changeMonth"
                                        @selectYear="changeYear"
                                >

                                </vue-calendar>
                            </div>

                            <!--<full-calendar
                                :config="config"
                                lang="zh"
                                :events="events"
                                @dayClick="dayClick"
                            >

                            </full-calendar>-->
                                <!--<full-Calendar
                                        defaultView="dayGridMonth"
                                        :plugins="calendarPlugins"
                                        locale="zh"
                                        schedulerLicenseKey="XXX"
                                        :weekends="true"
                                        :events="events"
                                        @dateClick="handleDateClick"
                                >

                                </full-Calendar>-->
                        </el-tab-pane>
                    </el-tabs>

                <!--<el-button class="btn-more" type="text" >
                    <a href="#" @click="handleSchedulerMore">MORE</a>
                </el-button>-->
            </div>
        </el-card>
    </div>
</template>

<script>
import { scheduler } from './data/Content.js';
import bus from '../../common/bus';
import vueCalendar from './calendar/calendar.vue';
import appUtil from '~/assets/utils/appUtil';
//import fullCalendar from 'vue-fullcalendar';
/*import FullCalendar from '@fullcalendar/vue'
    import dayGridPlugin from '@fullcalendar/daygrid'
    import resourceTimelinePlugin from '@fullcalendar/resource-timeline'
    import interactionPlugin from '@fullcalendar/interaction'
    import timeGridPlugin from '@fullcalendar/timegrid'*/

export default {
    name: 'schedulerList',
    components: {
        vueCalendar
    },
    data() {
        return {
            calendar:{
                value:[], //默认日期
                lunar:true, //显示农历
                begin: [],
                weeks:['日', '一', '二', '三', '四', '五', '六'],
                months:['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                events:{
                    /*'2019-11-04':'123',
                  '2019-11-20':'七夕'*/
                },
                select(value){
                    //console.log(value.toString());
                    let menu={
                        url:'calendar/calendar-index.html?date=' + value,
                        name:'日程管理'
                    };
                    bus.$emit('openMenu',menu);
                },
                timestamp:Date.now()
            },
            activeName: 'first',
            //newsList: require("./data/NewsData.json"),
            scheduler: scheduler,
        };
    },
    methods: {
        getEventsByMonth(year, month){
            let tempEvent = {};
            this.$axios.get('/ptp-msg/bizCalendarController/selectCalendarByMonth/' + year + '/' + month +'/' + appUtil.getSes('userId')+'?roles='+appUtil.getSes('roleIds')).then(res => {
                res.data.forEach(event => {
                    let date = event.start.slice(0, 5) + event.start.slice(5, 10).replace(/0(?=[1-9])/g, '');  //插件无法识别2019-05-05的前缀0，因此需要手动去掉
                    tempEvent[date] = event.title;
                });
                //console.log(tempEvent);
                this.calendar.events = tempEvent;
            });
        },
        handleSchedulerMore(){
            bus.$emit('openMenu',scheduler.moreUrl,scheduler.name);
        },
        // dayClick(event, jsEvent){

        //     //console.log(event);
        // },
        changeMonth(month){
            let date = new Date();
            this.getEventsByMonth(date.getFullYear(), month);
        },
        changeYear(year){
            let date = new Date();
            this.getEventsByMonth(year, date.getMonth() + 1);
        },
        handleDateClick(arg) {
            if (confirm('Would you like to add an event to ' + arg.dateStr + ' ?')) {
                this.events.push({ // add new event data
                    title: 'New Event',
                    start: arg.date,
                    allDay: arg.allDay
                });
            }
        }
    },
    mounted(){
        let date = new Date();
        this.getEventsByMonth(date.getFullYear(), date.getMonth() + 1);
    }
};
</script>

<style lang="scss">
    .calendar tr{
        height: 45px;
    }
    .calendar tr td{
        padding: 4px !important;
        border: 1px solid transparent;
    }
    .calendar tr td:hover {
        background-color: #f6f6f6;
    }

    .calendar td:not(.selected) span[data-v-0613f8c2]:not(.red):hover{
        background-color: transparent;
    }
    /*@import '~@fullcalendar/core/main.css';
    @import '~@fullcalendar/daygrid/main.css';
    @import '~@fullcalendar/timeline/main.css';
    @import '~@fullcalendar/resource-timeline/main.css';*/
</style>